<template>
    <router-view v-slot="{ Component }">
        <transition :name="transitionName">
            <keep-alive>
                <component :is="Component" />
            </keep-alive>
        </transition>
    </router-view>
    <Bottom/>
</template>
<script setup>
import Bottom from '@/components/bottom/index.vue'
import { watch ,ref} from 'vue'
import { useRoute } from 'vue-router'
let route = useRoute()
let transitionName = ref()
watch(()=> route.meta ,(newVal,oldVal)=>{
    //根据规定的meta，【新】的减去【旧】的index，如果是正是就右边进来，如果是负数就是左边进来
    if(newVal != null && oldVal != null ){
        transitionName.value = newVal.index - oldVal.index > 0 ? 'rightIn' : 'leftIn'
    }
    // console.log(newVal,oldVal);
},{ immediate: true })
</script>
<style scoped lang="scss">
.rightIn-enter-active{
    transform: translateX(100%);
    transition: all .23s ease-in-out;
}
.rightIn-enter-to{
    transform: translateX(0%);
}
.rightIn-leave-active{
    transform: scale(1,1);
    transition: all .23s ease-in-out;
}
.rightIn-leave-to{
    transform: scale(.85,.85);
}
.leftIn-enter-active{
    transform: translateX(-100%);
    transition: all .23s ease-in-out;
}
.leftIn-enter-to{
    transform: translateX(0%);
}
.leftIn-leave-active{
    transform: scale(1,1);
    transition: all .23s ease-in-out;
}
.leftIn-leave-to{
    transform: scale(.85,.85);
}
</style>